文章將陸續整理並更新至個人部落格。

先前介紹格式化上下文(formatting context)時，曾說到 container box 會為其內容建立格式化上下文，而 display: flex 的元素會為其內容建立 flex formatting contex，其處在這佈局環境中的子元素，皆會遵照它的佈局規則。

flex container

• display 為 flex 或 inline-flex 的元素。

• flex container 會建立 flex formatting contex(FFC)，所以：

  • 此元素不會與 float 元素重疊。

  • 此元素不會與其子元素(flex item)發生 margin collapsing。

• column-* 屬性不適用。

flex item

display 為 flex 或 inline-flex 元素的子元素稱為 flex item。

• 建立 block formatting contex(BFC)，所以 flex items 之間不會發生 margin collapsing。

• 參與 flex formatting contex(FFC)。

• vertical-align 不適用。

• float 與 clear 不適用。

• 即使 flex item 是 display: inline 的元素，仍然可以透過 width 與 height 屬性調整寬高。因 flex item 是 blockified。

註：
建立 formatting contex 是為後裔元素建立一個佈局環境;
參與 formatting contex 是元素本身處在何種佈局環境。

主軸(main axis)與副軸(cross axis)

flex items 可以透過 flex-direction 屬性來決定排列方向，flex-direction 同時也會決定主軸(main axis)與副軸(cross axis)。

摘自W3C

flex-direction 共有四個屬性值，會受到書寫方向 writing-mode 影響。

以橫向且由左至右的書寫方式來說，此時 row 為橫向，column 為直向。

flex-direction: row

• 主軸為 row 方向。
• 副軸為 column 方向。
• 由 main start 至 main end 排列。

flex-direction: row-reverse

• 主軸為 row 方向。
• 副軸為 column 方向。
• 由 main end 至 main start 排列。

flex-direction: column

• 主軸為 column 方向。
• 副軸為 row 方向。
• 由 main start 至 main end 排列。

flex-direction:column-reverse

• 主軸為 column 方向。
• 副軸為 row 方向。
• 由 main end 至 main start 排列。

還在持續看 flex 規範中～ 或許看完之後會再重新整理一次文章～

參考資料

W3C-Flexible Box Layout
W3C-Automatic Box Type Transformations